<template>
  <el-container class="index-con" v-if="!is_h5s">
    <el-header class="index-header lyadmin-header">
      <navcon v-if="!is_h5s"></navcon>
      <navconH5 v-else></navconH5>
    </el-header>
    <el-container class="main-con">
      <el-aside :class="showclass" class="lyadmin-side" v-if="!is_h5s">
        <el-scrollbar style="position: relative">
          <leftnav></leftnav>
          <div
            class="bBen"
            style="position: absolute; bottom: 0; left: 0; right: 0"
          >
            版本号：V{{ config.APP_VER }}
          </div>
        </el-scrollbar>
      </el-aside>
      <el-main class="index-main" v-if="isMultiTabs">
        <mutitabs></mutitabs>
      </el-main>
      <el-main class="index-main" v-else>
        <keep-alive>
          <router-view v-if="$route.meta.isActive"></router-view>
        </keep-alive>

        <router-view v-if="!$route.meta.isActive"></router-view>
      </el-main>
    </el-container>
  </el-container>
  <div v-else class="h5_min" style="height: 100vh;overflow: hidden;">
    <div ref="h5MinTop" class="h5_min_top">
      <!-- <navconH5 ></navconH5> -->
    </div>
    <div class="h5_min_main" :style="{ height: h5MinMainHeight + 'px' }">
      <router-view style="height: 100%"></router-view>
    </div>

    <div ref="feeds">
      <H5table></H5table>
    </div>
  </div>
</template>

<script setup>
import config from "@/config/index";
import {
  ref,
  onMounted,
  getCurrentInstance,
  computed,
  onBeforeUnmount,
} from "vue";
import { setStorage, getStorage } from "@/utils/util";

import navcon from "@/components/navcon.vue";
import navconH5 from "@/components/navconH5.vue";
import leftnav from "@/components/leftnav.vue";
import Mutitabs from "@/components/mutitabs.vue";
import H5table from "@/components/H5table.vue";
import { useMutitabsStore } from "@/store/mutitabs";
import { useSiteThemeStore } from "@/store/siteTheme";

let bus = getCurrentInstance().appContext.config.globalProperties.$Bus; // 声明$Bus
let showclass = ref("asideshow");
let showtype = ref(false);
const mutitabsStore = useMutitabsStore();
let isMultiTabs = mutitabsStore.isMultiTabs;

const siteThemeStore = useSiteThemeStore();

const asideshowWidth = computed(() => {
  return siteThemeStore.menuWidth + "px";
});
// 获取 DOM 元素
const h5MinTop = ref(null);
const feeds = ref(null);

let is_h5s = ref(false); //是否是移动端
// 计算 h5_min_main 的高度
// 计算 h5_min_main 的高度
const h5MinMainHeight = ref(0);
// 监听 feeds 高度变化
const observeFeedsHeight = () => {
  const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
      const { height } = entry.contentRect;
      updateH5MinMainHeight(height);
    }
  });

  if (feeds.value) {
    observer.observe(feeds.value);
  }
};
// 更新 h5_min_main 的高度
const updateH5MinMainHeight = (feedsHeight) => {
  const viewportHeight = window.innerHeight;
  const topHeight = h5MinTop.value?.clientHeight || 0;
  h5MinMainHeight.value = viewportHeight - topHeight - feedsHeight;
};

const checkScreenSize = () => {
  // 屏幕尺寸符合以及移动端开启
  if (window.innerWidth <= 768 && config.isMobile) {
    is_h5s.value = true;
  } else {
    is_h5s.value = false;
  }
  setStorage("is_h5s", is_h5s.value);
  if(is_h5s.value)  updateH5MinMainHeight();
  


};

// 初始化监听器
const initResizeListener = () => {
  window.addEventListener("resize", checkScreenSize);
  updateH5MinMainHeight();
};

// 移除监听器
const removeResizeListener = () => {
  window.removeEventListener("resize", checkScreenSize);
};
checkScreenSize();

onMounted(() => {
  bus.on("toggle", (value) => {
    //console.log('value')
    if (value) {
      showclass.value = "asideshow";
    } else {
      showclass.value = "aside";
    }
  });
  observeFeedsHeight();

  window.addEventListener("resize", () => {
    updateH5MinMainHeight(feeds.value?.clientHeight || 0);
  });
  checkScreenSize(); // 初始化检查
  initResizeListener(); // 添加监听器
});
// 组件卸载时
onBeforeUnmount(() => {
  removeResizeListener(); // 移除监听器
});
</script>
<style scoped>
.main-con {
  width: 100%;
  height: 100%;
  /*overflow-y: auto;*/
}
.hg100 {
  height: 100vh !important;
  overflow-y: hidden !important;
}
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
}

.aside {
  width: 64px !important;
  /* background-color: var(--l-header-bg); */
  background-color: #fff;

  margin: 0px;
  box-shadow: 0 0 5px #cccccc;
  height: calc(100vh - 60px);
}

.asideshow {
  width: v-bind(asideshowWidth);
  height: calc(100vh - 60px);
  background-color: #fff;
  margin: 0px;
  box-shadow: 0 0 3px #cccccc;
}
.index-main {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  overflow: auto;
  padding: 8px 8px 0 8px;
  width: 100%;
}

.el-main.noPadding {
  padding: 0px !important;
  border-left: 2px solid #333;
}
</style>

<style lang="scss">
@media (max-width: 992px) {
  .index-main {
    background: linear-gradient(
      to bottom,
      rgb(9, 119, 236, 0.8) 5%,
      #ffffff 90%
    ); /* 浅绿色到深绿色的渐变 */
  }
}
.bBen {
  display: none;
}
.asideshow {
  .bBen {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    color: #c0c0c0;
    font-size: 12px;
  }
}
// 移动端样式覆盖
@media (max-width: 992px) {
  .lycontainer {
    height: 100% !important;
  }
}
</style>

<style>
.h5_min {
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #e6f6e9 36.18%, #fef5e4 100%);
  
}
.h5_min_top {
  /* height: 100%; */
}
.h5_min_main {
  height: 100%;
}
</style>
<style>
/* 仅在移动端生效 */
@media (max-width: 768px) {
  :root {
    --el-color-primary: #49b9ad !important;
    --el-color-primary-light-3: #3a8f86 !important;
    --el-color-primary-light-5: #2b6a63 !important;
    --el-color-primary-light-7: #1c4540 !important;
    --el-color-primary-light-8: #e2fff8 !important;
    --el-color-primary-light-9: #c0e0d8 !important;
    --el-color-primary-dark-2: #6bc7bd !important;
  }
}
</style>